import React, { FC, useState, useRef } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import RootPageComponent from '@/pages/components/RootPageComponent/RootPageComponent';
import { Tabs, Swiper } from 'antd-mobile';
import { SwiperRef } from 'antd-mobile/es/components/swiper';
import MessageTabs from './MessageTabs/MessageTabs';
// import { useOptionsRender } from './MessageOptions';
import { MessageContext } from './MessageContex';
import AllMessage from './AllMessage/AllMessage';
import UnreadMessages from './UnreadMessages/UnreadMessages';
import RootPageComponentGotoMenu from '@/pages/components/RootPageComponentGotoMenu/RootPageComponentGotoMenu';
export interface IProps extends ICompProps {}
MessageNotification.defaultProps = {} as Partial<IProps>;
function MessageNotification(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('MessageNotification', className);
    const [activeIndex, setActiveIndex] = useState(0);
    // const [swiperRef,setSwiperRef] = useState(null);
    const swiperRef = useRef<SwiperRef>(null);
    const tabItems = [
        { key: 'all', title: '全部消息' },
        { key: 'Unread', title: '未读消息' },
    ];
    return (
        <MessageContext.Provider value={{ activeIndex, setActiveIndex, tabItems, swiperRef }}>
            <RootView className={localClassName} style={style}>
                <RootPageComponent
                    enableExpand={false}
                    leftTitle="消息通知"
                    scrollOffsetBottom={0}
                    headFixedSlot={<MessageTabs></MessageTabs>}
                    headNavContentRightSlot={<RootPageComponentGotoMenu />}>
                    {({ height }) => (
                        <Swiper
                            style={{ height }}
                            className="swipercontent"
                            direction="horizontal"
                            loop
                            indicator={() => null}
                            ref={swiperRef}
                            defaultIndex={activeIndex}
                            onIndexChange={(index) => {
                                setActiveIndex(index);
                            }}>
                            {tabItems.map((item) => (
                                <Swiper.Item key={item.key}>
                                    {item.key === 'all' ? (
                                        <AllMessage style={{ height: height + 'px' }}></AllMessage>
                                    ) : (
                                        <UnreadMessages style={{ height: height + 'px' }}></UnreadMessages>
                                    )}
                                </Swiper.Item>
                            ))}
                        </Swiper>
                    )}
                </RootPageComponent>
            </RootView>
        </MessageContext.Provider>
    );
}
export default React.memo(MessageNotification as FC<IProps>);
const RootView = styled(View)`
    &.MessageNotification {
        /* .swipercontent {
            overflow-x: hidden;
            overflow-y: scroll;
        } */
    }
`;
